<template>
	<view class="listwrapper">
		
		<view class="listitem" v-for="item in datalist" :key="item.id">
			<view class="left">
				<image :src="item.avatar"></image>
				<view class="nickname">{{item.nickname}}</view>
			</view>
			<view class="mid">{{item.mobile}}</view>
			<view class="right">
				<view class="addtime">{{item.createtime}}</view>
				<view class="btnwrapper">
					<button class="del" @click="delsub(item)">解绑</button>
				</view>
			</view>
		</view>
		
		<view class="noone" v-if="datalist.length == 0" style="text-align: center;margin-top:30rpx;">暂无子帐户</view>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				datalist:[]
			}
		},
		
		onLoad(){
			let that = this;
			uni.request({
				url:"/wanlshop/shop/getSubShopers",
				method:"POST",
				success(res){
					console.log(res.data);
					that.datalist = res.data
					
					
				}
			})
		},
		
		methods:{
			delsub(item){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要解绑该子帐号吗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.request({
								url:"/wanlshop/shop/unbindsubuser",
								method:"POST",
								data:{id:item.id},
								success(res){
									uni.showToast({
										icon:"success",
										title:"解绑成功"
									})
									let index = that.datalist.findIndex(it=>{
										return it.id == item.id;
									})
									
									if(index !== -1){
										that.datalist.splice(index,1);
									}
									
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
		
		
	}
</script>

<style lang="scss" scoped>
.listwrapper{
	
	width:100%;
	min-height:100vh;
	padding:30rpx 20rpx;
	box-sizing: border-box;
	background:#fff;
	
	.listitem{
		background:#f5f5f5;
		display:flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
				padding:20rpx;
		.left{
	
			box-sizing: border-box;
			display:flex;
			align-items: center;
			flex:1;
			image{
				width:80rpx;
				height:80rpx;
				border-radius: 40rpx;
				margin-right:10rpx;
			}
		}
		.mid{
			flex-basis: 200rpx;
		}
		.right{
			flex:1;
			display:flex;
			align-items: center;
			.addtime{
				font-size:22rpx;
				margin:0 10rpx;
			}
			.btnwrapper{
				.del{
					width:120rpx;
					height:50rpx;
					font-size:24rpx;
					line-height:50rpx;
					padding:0 !important;
					background:orangered;
					color:#fff;
				}
			}
		}
	}
	
	
	
}
	
	
</style>